<template>
	<div class="teachVideo">
		<div class="teach_h clear">
			<span>我的回答</span>
		</div>
		<!--  -->
		<div class="teachVideo_ch">
			<label>
				<input type="radio" name="answer">
				<span @click="Allquestion(0)">未回答(<i>{{ no_answer_count }}</i>)</span>
			</label>
			<label>
				<input type="radio" name="answer">
				<span  @click="Allquestion(1)">已回答(<i>{{ answer_count }}</i>)</span>
			</label>
			<label>
				<input type="radio" name="answer" checked>
				<span @click="Allquestion(-1)">全部(<i>{{ all_count }}</i>)</span>
			</label>
		</div>
		<!--  -->
		<ul  v-loading="loading">
			<li class="teachVideo_ls clear" v-for="(item, index) in commentList" :key="item.id">
				<a @click="openClass(item.videoid)" class="teachVideo_lsl fl box">
					<img :src="BASE_URL +'/'+ item.video_image" :onerror="errorImg">
				</a>
				<div class="teachVideo_lsr">
					<div class="teachVideo_lsr1 clear">
						<a  @click="openClass(item.videoid)">
							<span>提问：</span>{{item.content}}
						</a>
						<div class="teachVideo_lsr1_r fr">
							<el-popover
								placement="bottom"
								width=""
								popper-class="ioperation_hover"
								trigger="hover">
								<ul class="r_ioperation">
									<li @click="removeList(item.id)">删除</li>
								</ul>
								<i slot="reference" class="el-icon-arrow-down"></i>
							</el-popover>
						</div>
					</div>
					<!--  -->
					<div class="teachVideo_lsr4">
						<span>节点：{{item.video_type_time}}</span>
					</div>
					<!-- 3 -->
					<div class="teachVideo_lsr5 clear">
						<span>{{item.user_name}} <i>{{item._create_time}}</i></span>
						<el-button class="fr" type="primary" 
						v-if='$g.user_id != item.create_id'
						@click="questionAnswering(item.id)">回复</el-button>
					</div>
				</div>
				<!--  -->
				<ul >
					<template  v-if="typeof(item.answer) != 'undefined'" >
						<li class="classTeest_PlS" 
							v-for="(item2, index2) in item.answer" :key="index2">
							<div class="classTeest_box clear">
								<div class="classTeest_PlS_l fl clear">
									<a><img :src="BASE_URL+ item2.avatar_path"></a>
									<div class="classTeest_PlS_lt">
										<div>
											<template>
												<a  v-if="item.create_id == item2.create_id">{{item2.user_name}}</a>
												<a v-else>我</a>
											</template>
										</div>
										<div>
											<span>{{item2._create_time}}</span>
										</div>
									</div>
								</div>
								<!--  -->
								<div class="classTeest_PlS_r box fl" v-html="item2.content"></div>
								<span class="el-icon-delete fr" @click="video_question_answer(item2.id)" 
								v-if="item2.create_id == $g.user_id"></span>
								<el-button type="text" class='fr' @click="commentShow(index)" 	v-if="item2.create_id != $g.user_id">回答</el-button>
							</div>
						</li>
					</template>
				</ul>

				<div class="teach-open" v-if="0">
					<span >展开更多</span>
				</div>
				<!-- 回复 -->
				<transition name="el-fade-in-linear">
					<div class="classTeest_rTx" v-show="commentTxT && item.showInput">
						<div class="classTeest_rPT">
							<el-input
							  type="textarea"
							  :rows="5"
							  resize="none"
							  maxlength="140"
							  placeholder="请输入内容"
							  v-model="commentVal">
							</el-input>
							<span><i>{{commentVal.length}}</i>/140</span>
						</div>
						<div class="classTeest_rPB">
							<el-button type="primary" plain @click="commentHide(index)">取消</el-button>
							<el-button type="primary" @click="comment(item.id)">保存</el-button>
						</div>
					</div>
				</transition>
			</li>
		</ul>

		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination
			    @current-change="change_page"
			    :page-size="page_size"
			    :current-page="page_index"
			    layout="prev, pager, next"
			    :total="total_number">
			  </el-pagination>
		</div>
		<!--  -->
		<el-dialog
			title="回答"
			:visible.sync="answerViews"
			width="800px"
			custom-class="answerViews"
			:close-on-click-modal="false"
			@close='resetForm("ruleForm")'>
			<div class="answerCont">
				<template v-for="(list, index) in answeringMsg">
					<div class="answerCont_h">
						<router-link to="###">
							<img :src="BASE_URL + list.avatar_path">
						</router-link>
						<span>{{list.user_name}}</span>
					</div>
					<div class="answerCont_TxT">
						<p class="answerCont_TxT_h">{{list.content}}</p>
						<div class="answerCont_TxT_m">
							<img :src="BASE_URL +'/'+ list.video_image" :onerror="errorImg">
						</div>
						<p class="answerCont_time">{{list._create_time}}</p>
					</div>
				</template>
					<!--  -->
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item  prop="desc" label-width="0">
								<el-input type="textarea"
								:rows="8" resize="none"
								maxlength="500"
								placeholder="请输入回答的内容"
								 v-model.tirm="ruleForm.desc"></el-input>
								 <span class="numberWord"><i>{{ ruleForm.desc.length }}</i>/500</span>
							</el-form-item>
							<el-form-item class="buttonCSS">
								<el-button  @click='resetForm("ruleForm")' type="primary" plain>取消</el-button>
								<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
							</el-form-item>
						</el-form>
					</div>
				<!-- </template> -->
			</div>
		</el-dialog>
	</div>
</template>
<script>
	
	export default {
		name: '',
		data() {
			return {
				id: '',
				videoid: this.$route.query.videoid,
				answerViews: false, //回答
				page_index: 1,
				page_size: this.$g.page_size,
				total_number: 0, //分页总数
				commentList: [],
				all_count: 0,
				answer_count: 0,
				no_answer_count: 0,
				Qstate: -1,
				answeringMsg: [],
				commentVal: '',
				commentTxT: false,
				placeholder: false,
				ruleForm: {
				 	desc: ''
				 },
				rules: {
				 	desc: [
				 		{ required: true, message: '请输入回答的内容', trigger: ['blur', 'change'] }
				 	]
				 },
				 errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
				 loading: true,
			}
		},
		created(){
			this.getCommentList()
			this.getVideoQuestionCount()
		},
		computed: {
	
		},
		methods: {
		
			/*
				跳转到公开课模块查看视频
			 */
			openClass(id){
				let host = sessionStorage.getItem( 'host' )
				let redirectParams = sessionStorage.getItem( 'redirect_params' )
				let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${id}`
				window.open(link)
			},
			getVideoQuestionCount() {
				let success = ( res =>{
					let data = res.data;
					this.all_count = data.all_count
					this.answer_count = data.answer_count;
					this.no_answer_count = data.no_answer_count;
				});

				this.$ajax({
					url: 'api/video/video_question_count',
					method: 'get',
					params: {
						userid: this.$g.user_id,
						type: 1
					},
					func: {success: success}
				})
			},
			//评论信息
			getCommentList(){
				let success = ( res =>{
					let data = res.data;
					this.commentList = data.data;
					this.page_index =  parseInt(data.page_index);
					this.total_number = data.data_sum;
					for (var i = 0; i < this.commentList.length; i++) {
						this.commentList[i].showInput = false;
					}

					this.loading = false;
					this.placeholder = this.commentList.length === 0 ? true : false
				});
				
				this.$ajax({
					url: 'api/video/video_question_list',
					method: 'get',
					params: {
						userid: this.$g.user_id,
						videoid: this.videoid,
						is_reply: this.Qstate,
						page_index: this.page_index,
						page_size: this.page_size,
						type: 1,
					},
					func: {success: success}
				})

			},
			//全部问答
			Allquestion(res_stare){
				this.Qstate = res_stare
				this.videoid = ''
				this.getCommentList()
				this.getVideoQuestionCount()
			},
			change_page(val) {
				this.page_size = val;
				this.getCommentList()
			},
			//表单验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {

						let success = ( res => {
							this.$message.success(res.msg);
							this.getCommentList()
							this.getVideoQuestionCount()
							this.answerViews = false;
							this.$refs[formName].resetFields();
						});
						this.$ajax({
							url:'api/video/video_question_answer',
							method:'post',
							data: {
								questionid: this.id,
								userid: this.$g.user_id,
								content: this.ruleForm.desc
							},
							func: {success: success}

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.answerViews = false
				this.$refs[formName].resetFields();
			},
			//删除视频问题
			removeList(id){
				this.$confirm('确认要删除此问答？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {
					let success = ( res => {
						this.$message.success(res.msg);
						this.getCommentList()
						this.getVideoQuestionCount()
					});
					this.$ajax({
						url: 'api/video/video_question',
						method: 'delete',
						params: {
							id: id,type: 2
						},
						func: {success: success}
					});
				}).catch(() => {});
			},
			//删除视频问答回复
			video_question_answer(id, question_id){
				this.$confirm('确认要删除此回复吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {
					let success = ( res => {
						this.$message.success(res.msg);
						this.page_index = 1;
						this.getCommentList()
					});
					this.$ajax({
						url: 'api/video/video_question_answer',
						method: 'delete',
						params: {id: id},
						func: {success: success}
					});
				}).catch(() => {});
			},
			//问答
			questionAnswering(id){
				let success = ( res => {
					let data = res.data;
					let arr = [];
					arr.push(data)
					this.answeringMsg = arr;
					this.answerViews = true;
					this.id = id
				});
				this.$ajax({
					url: 'api/video/video_question',
					method: 'get',
					params: {
						question_id: id,
					},
					func: {success: success}
				})
			},
			commentShow(inx){
				this.commentList[inx].showInput = true;
				this.commentTxT = true;
			},
			//
			commentHide(inx){
				this.commentList[inx].showInput = false;
				this.commentTxT = false;
			},
			//
			comment(id){
				let success = ( res => {
					this.commentTxT = false;
					this.commentVal = '';
					this.getCommentList()
				});
				this.$ajax({
					url:'api/video/video_question_answer',
					method:'post',
					data: {
						questionid: id,
						userid: this.$g.user_id,
						content: this.commentVal
					},
					func: {success: success}

				})
			}
		}
	}
</script>
